<template>
  <div>
    <div class="wrap">
      <div class="left">123</div>
      <div class="right">
        <!-- 给wrap开启flex布局后，再次给one也开启flex布局，同时给one开启换行 -->
        <div class="one">
          <span>aaaaaaaaaa</span><span>aaaaaaaaaa</span><span>aaaaaaaaaa</span
          ><span>aaaaaaaaaa</span><span>aaaaaaaaaa</span><span>aaaaaaaaaa</span
          ><span>aaaaaaaaaa</span><span>aaaaaaaaaa</span><span>aaaaaaaaaa</span
          ><span>aaaaaaaaaa</span><span>aaaaaaaaaa</span><span>aaaaaaaaaa</span
          ><span>aaaaaaaaaa</span><span>aaaaaaaaaa</span><span>aaaaaaaaaa</span
          ><span>aaaaaaaaaa</span><span>aaaaaaaaaa</span><span>aaaaaaaaaa</span
          ><span>aaaaaaaaaa</span><span>aaaaaaaaaa</span><span>aaaaaaaaaa</span
          ><span>aaaaaaaaaa</span><span>aaaaaaaaaa</span><span>aaaaaaaaaa</span
          ><span>aaaaaaaaaa</span><span>aaaaaaaaaa</span><span>aaaaaaaaaa</span
          ><span>aaaaaaaaaa</span><span>aaaaaaaaaa</span><span>aaaaaaaaaa</span>
        </div>
      </div>
    </div>

    <div class="container1">
      <div class="item">第一个元素</div>
      <div class="item">第二个元素</div>
      <div class="item">第二个元素</div>
    </div>

    <div class="container2">
      <div class="item">
        <div class="tag">第一个元素</div>
        <div class="content">内容</div>
      </div>
      <div class="item">
        <div class="tag">第一个元素</div>
        <div class="content">内容</div>
      </div>
      <div class="item">
        <div class="tag">第一个元素</div>
        <div class="content">内容</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.big {
    flex: 0 0 calc(50% - 10px); /* 一行占两个，减去间距，假设间距为20px（每个元素左右各10px） */
    height: 100px;
    background-color: red;
    margin-bottom: 10px;
}

.middle {
    flex: 0 0 calc(25% - 10px); /* 一行占四个，减去间距 */
    height: 100px;
    background-color: green;
    margin-bottom: 10px;
}

.small {
    flex: 0 0 calc(12.5% - 10px); /* 一行占八个，减去间距 */
    height: 50px;
    background-color: blue;
    margin-bottom: 5px; /* 可根据实际情况调整垂直方向间距 */
}

/* 使用伪元素填充剩余空间 */
.container::after {
    content: "";
    flex: auto;
}
</style>
